<template>
    <div>
        <div class="controls">
            <el-button
                type="primary"
                class="mr-2"
                v-if="!started"
                @click="start"
                >开始</el-button
            >
            <el-button
                type="primary"
                class="mr-2"
                v-if="started"
                @click="next"
                :disabled="isAnimation"
                >下一步</el-button
            >
            <el-button
                type="primary"
                class="mr-2"
                v-if="started"
                @click="runToEnd"
                :disabled="isAnimation"
                >运行到结束</el-button
            >
        </div>
        <div class="flex mt-2">
            <div class="whitespace-nowrap">要排序的元素：</div>
            <el-input
                class="w-[400px] mr-2"
                v-model="intputVal"
                placeholder="逗号隔开"
            ></el-input>
            <el-button @click="handleChangeArr">确定</el-button>
        </div>
        <div class="flex mt-2">
            <div class="whitespace-nowrap">提示信息：{{ infoText }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
    infoText,
    init,
    isAnimation,
    next,
    runToEnd,
    start,
    started,
} from './core/index'

const intputVal = ref('1, 4, 5, 6, 7, 2, 5, 6, 7')

onMounted(() => {
    init(intputVal.value.split(',').map((item) => Number(item.trim())))
})

const handleChangeArr = () => {
    const arr = intputVal.value.split(',').map((item) => Number(item.trim()))
    init(arr)
}
</script>

<style scoped></style>
